<template>
	<view>
		<todolist-insert @update:model-value="handleInsert"></todolist-insert>
		<todolist-list :list-data="listData" @delete-row="handleDeleteRow" @delete="handleDelete"></todolist-list>
	</view>
</template>

<script setup lang="ts">
	import todolistInsert from "@/components/todolist/todolist-insert.vue";
	import todolistList from "@/components/todolist/todolist-list.vue";
	import {
		ref,
		reactive
	} from "vue";


	const listData = reactive([{
			id: 1,
			name: "Hydra",
			sex: "男",
			tel: "13547811112",
			major: "JAVA",
		},
		{
			id: 2,
			name: "王珂",
			sex: "男",
			tel: "13547811113",
			major: "WEB",
		},
		{
			id: 3,
			name: "聂仔欣",
			sex: "男",
			tel: "13547811114",
			major: "JAVA",
		},
	]);

	function handleInsert(value: any) {
		listData.push(value);
		console.log("value = ", value);
	}

	function handleDeleteRow(id: number) {
		const index = listData.findIndex((v: any) => v.id == id);
		listData.splice(index, 1);
	}

	function handleDelete(selectIds: any[]) {
		// 从listData中删除在selectIds中的所有数据
		// 把未选中的数据拿出来，然后复制给listData
		const result = listData.filter(
			(v1) => selectIds.findIndex((v2) => v2 == v1.id) == -1
		);
		// 数组清空：把长度赋值为0
		listData.length = 0;
		// 添加元素
		listData.push(...result);
	}
</script>

<style lang="scss">

</style>
